const class_item = {
    width: "100%",
    padding: "2px 5px",
}
const class_btn = {
    borderStyle : "none",
    backgroundColor : "#409eff",
    color: "white",
    padding: "5px 10px",
    borderRadius: "5px",
    fontSize: "12px"
}

const class_text = {
    fontSize: "12px"
}

const class_input = {
    padding: "5px 10px",
    borderRadius: "5px",
    borderColor: "#dcdfe6",
    boxShadow: "0 0 0 1px #dcdfe6",
    width: "160px",
    fontSize: "14px"
}

const div = document.createElement('div');
div.style.position = "fixed";
div.style.top = '160px';
div.style.left = '10px';
div.style.width = '310px';
div.style.zIndex = '99999';
div.style.borderStyle = "solid";
div.style.borderWidth = "1px";
div.style.borderColor = "black";
div.style.borderRadius = "5px";
let isDragging = false;
let offsetX, offsetY;
div.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - div.offsetLeft;
    offsetY = e.clientY - div.offsetTop;
});
window.addEventListener('mousemove', (e) => {
    if (isDragging) {
        div.style.left = `${e.clientX - offsetX}px`;
        div.style.top = `${e.clientY - offsetY}px`;
    }
});
window.addEventListener('mouseup', () => {
    isDragging = false;
});



const title_div = document.createElement('div');

const title_span = document.createElement("span");
title_span.style.fontSize = "15px";
title_span.textContent = "PDD助手";
title_span.style.marginLeft = "15px";
title_div.appendChild(title_span);
const title_co_span = document.createElement("span");
Object.assign(title_co_span.style, class_text);
title_co_span.textContent = "展开/折叠";
title_co_span.style.marginLeft = "170px";
title_div.appendChild(title_co_span);
title_div.style.width = '100%';
title_div.style.height = "30px";
title_div.style.lineHeight = "30px";
// title_div.style.textAlign = "center";
title_div.style.color = "white";
title_div.style.fontSize = "15px";
title_div.style.backgroundColor = "black";


const content_div = document.createElement("div");
content_div.style.backgroundColor = "#fff";
content_div.style.display = "inherit";
content_div.id = "cpxd_content";

// contentdiv 建立好后
title_co_span.addEventListener("click", () => {
    if (content_div.style.display == "inherit") {
        content_div.style.display = "none";
    } else {
        content_div.style.display = "inherit";
    }
});

const item_div = document.createElement('div');
Object.assign(item_div.style, {...class_item});
const autopay_btn = document.createElement('button');
autopay_btn.textContent = "自动付款开启";
Object.assign(autopay_btn.style, class_btn);
item_div.appendChild(autopay_btn);


const item_pwd_div = document.createElement('div');
Object.assign(item_pwd_div.style, {...class_item});
const span_password = document.createElement("span");
span_password.textContent = "支付密码设置： ";
Object.assign(span_password.style, class_text);
span_password.style.paddingRight = "5px;";
item_pwd_div.appendChild(span_password);
const pwd_input = document.createElement("input");
pwd_input.id = "autopay_input";
pwd_input.type = "password";
Object.assign(pwd_input.style, class_input);
const pwdsave_btn = document.createElement("button");
pwdsave_btn.id = "cpxd_pwdsave";
pwdsave_btn.textContent = "保存";
Object.assign(pwdsave_btn.style, class_btn);
pwdsave_btn.style.marginLeft = "5px";
item_pwd_div.appendChild(pwd_input);
item_pwd_div.appendChild(pwdsave_btn);


const showpwd_div = document.createElement("div");
Object.assign(showpwd_div.style, class_item);
const showpwd_span = document.createElement("span");
showpwd_span.textContent = "支付密码： ";
Object.assign(showpwd_div.style, class_text);
const pwd_span = document.createElement("span");
pwd_span.id = "cpxd_pwd";
pwd_span.textContent = "无";
Object.assign(pwd_span.style, class_text);
pwd_span.style.color = "red";
showpwd_div.appendChild(showpwd_span);
showpwd_div.appendChild(pwd_span);


const pay_remake_div = document.createElement("div");
Object.assign(pay_remake_div.style, class_item);
const pinno_span = document.createElement("span");
pinno_span.textContent = "PDD免拼：";
Object.assign(pinno_span.style, class_text);
pay_remake_div.appendChild(pinno_span);
const pinno_btn = document.createElement("button");
pinno_btn.textContent = "一键免拼";
Object.assign(pinno_btn.style, class_btn);
pay_remake_div.appendChild(pinno_btn);
const remake_span = document.createElement("span");
remake_span.textContent = "采购订单留言：";
Object.assign(remake_span.style, class_text);
remake_span.style.marginLeft = "15px";
pay_remake_div.appendChild(remake_span);
const remake_btn = document.createElement("button");
remake_btn.textContent = "一键备注";
Object.assign(remake_btn.style, class_btn);
pay_remake_div.appendChild(remake_btn);


const out_title_div = document.createElement("div");
Object.assign(out_title_div.style, class_item);
out_title_div.textContent = "导出PDD订单";
out_title_div.style.fontSize = "14px";
out_title_div.style.fontWeight = "bolder";

const start_time_div = document.createElement("div");
Object.assign(start_time_div.style, class_item);
const start_time_span = document.createElement("span");
start_time_span.textContent = "开始时间：";
Object.assign(start_time_span.style, class_text);
start_time_div.appendChild(start_time_span);
const start_time_input = document.createElement("input");
Object.assign(start_time_input.style, class_input);
start_time_input.type = "date";
start_time_input.style.width = "120px";
start_time_input.type = "date";
start_time_div.appendChild(start_time_input);

const end_time_div = document.createElement("div");
Object.assign(end_time_div.style, class_item);
const end_time_span = document.createElement("span");
end_time_span.textContent = "结束时间：";
Object.assign(end_time_span.style, class_text);
end_time_div.appendChild(end_time_span);
const end_time_input = document.createElement("input");
Object.assign(end_time_input.style, class_input);
end_time_input.type = "date";
end_time_input.style.width = "120px";
end_time_div.appendChild(end_time_input);

const order_state_div = document.createElement("div");
Object.assign(order_state_div.style, class_item);
const order_state_span = document.createElement("span");
Object.assign(order_state_span.style, class_text);
order_state_span.textContent = "导出订单数量：";
order_state_div.appendChild(order_state_span);
const order_state_select = document.createElement("select");
Object.assign(order_state_select.style, class_input);
order_state_select.style.width = "80px";
order_state_select.style.padding = "5px 0px";
const option1 = document.createElement("option");
option1.textContent = "待付款";
const option2 = document.createElement("option");
option2.textContent = "待发货";
const option3 = document.createElement("option");
option3.textContent = "待收获";
const option4 = document.createElement("option");   
option4.textContent = "已退款";
order_state_select.appendChild(option1);
order_state_select.appendChild(option2);
order_state_select.appendChild(option3);
order_state_select.appendChild(option4);
order_state_div.appendChild(order_state_select);
const order_state_input = document.createElement("input");
Object.assign(order_state_input.style, class_input);
order_state_input.style.width = "50px";
order_state_input.style.marginLeft = "10px";
order_state_div.appendChild(order_state_input);
const order_state_btn = document.createElement("button");
Object.assign(order_state_btn.style, class_btn);
order_state_btn.textContent = "导出";
order_state_btn.style.marginLeft = "15px";
order_state_div.appendChild(order_state_btn);

const user_title_div = document.createElement("div");
Object.assign(user_title_div.style, class_item);
const user_title_span = document.createElement("span");
user_title_span.textContent = "展开账号列表";
Object.assign(user_title_span.style, class_text);
user_title_span.style.color = "#409eff";
user_title_span.style.marginLeft = "220px";
user_title_div.appendChild(user_title_span);

const user_now_div = document.createElement("div");
Object.assign(user_now_div.style, class_item);
const user_now_span = document.createElement("span");
Object.assign(user_now_span.style, class_text);
user_now_span.textContent = "当前pdd账号：";
user_now_div.appendChild(user_now_span);


content_div.appendChild(item_div);
content_div.appendChild(item_pwd_div);
content_div.appendChild(showpwd_div);
content_div.appendChild(pay_remake_div);
content_div.appendChild(out_title_div);
content_div.appendChild(start_time_div);
content_div.appendChild(end_time_div);
content_div.appendChild(order_state_div);
content_div.appendChild(user_title_div);
content_div.appendChild(user_now_div);

div.appendChild(title_div);
div.appendChild(content_div);
// document.body.appendChild(div);

var currentUrl = window.location.href;
if (currentUrl.includes('https://mobile.yangkeduo.com/personal.html')) {
    // alert('个人主页');
    var nikename = document.getElementsByClassName('nickname')[0].innerHTML;

    chrome.runtime.sendMessage({ greeting: "nowAccount", data: nikename }, (response) => {
        
    });
}